<template lang="html">
   <div class="all" >


       <div class="first" v-for="(item ,index) in obj.content_list" v-if="index==0">
       <img  :src="obj.content_list[index].img_url" @click ="changed(item.content_id)" alt="">

     <p class="author">
     <span>{{obj.content_list[index].title}}</span>
     <span>|</span>
     <span>{{obj.content_list[index].pic_info}}</span>
     </p>
     <p class="underline_y">{{obj.content_list[index].forward}}</p>
     <span class="authors">{{obj.content_list[index].words_info}}</span>
     <div class="bottom">
       <div class="bo_left">
           <span class="icon-bi" @click ="tiao(item.content_id)">小记</span>
       </div>
  <div class="bo_right">
    <span class="icon-shou1" @click="typ()" v-if="ta == 1"><label>6624</label></span>
    <span class="icon-shou2"  @click ="typc()" v-if="ta==0"><label>6625</label></span>
    <span class="icon-shu" @click="typa()" v-if=" tb == 1"></span>
    <span class="icon-shu cop" @click="typac()" v-if=" tb == 0"></span>
    <span class="icon-fen"></span>
  </div>


     </div>
      </div>

     <div class="xiala">
        <p class="y_xiala" @mousedown="shows()">一个VOL.1865 </p>
       <div class="showxiala" v-if="show == true">
         <div class="" v-for="(item ,index) in obj.content_list" v-if="index>=1">
            <div class="xiaLaList">

               <img src="../../static/img/right.png" alt="">
              <div  class="y_xialeft">
              <p >ONE STORY</p>
              <p @click ="change(item.content_id)">{{item.title}}</p>
            </div>

          </div>
     </div>
      </div>

      </div>

     <div class="second" v-for="(item ,index) in obj.content_list" v-if="index>=1 && item.content_type==1">
         <p>- 阅读 -</p>
         <h3 class="title">{{obj.content_list[index].title}}</h3>
         <p class="author">{{'文 / '+obj.content_list[index].author.user_name}}</p>
         <img @click =change(item.content_id) :src="obj.content_list[index].img_url" alt="">
         <p class="article">{{obj.content_list[index].forward}}</p>
         <div class="s_bottom">
           <div class="bo_left">
             <span class="y_bot">今天</span>

           </div>
           <div class="bo_right">
             <span class="icon-shou1" @click= "dib()" v-if="db ==1"><label>1205</label></span>
             <span class="icon-shou2" @click= "dibc()" v-if="db ==0"><label>1206</label></span>
             <span class="icon-fen"></span>
           </div>

         </div>



     </div>

     <div class="second" v-for="(item ,index) in obj.content_list" v-if="index>=1 && item.content_type==2">
         <p>- 连载 -</p>
         <h3 class="title">{{obj.content_list[index].title}}</h3>
         <p class="author">{{'文 / '+obj.content_list[index].author.user_name}}</p>
         <img @click =changes(item.content_id) :src="obj.content_list[index].img_url" alt="">
         <p class="article">{{obj.content_list[index].forward}}</p>
         <div class="s_bottom">
           <div class="bo_left">
             <span class="y_bot">今天</span>

           </div>
           <div class="bo_right">
             <span class="icon-shou1" @click= "dic()" v-if="dc ==1"><label>1205</label></span>
             <span class="icon-shou2" @click= "dicc()" v-if="dc ==0"><label>1206</label></span>
             <span class="icon-fen"></span>
           </div>

         </div>



     </div>
     <div class="second" v-for="(item ,index) in obj.content_list" v-if="index>=1 && item.content_type==3">
         <p>- 问答 -</p>
         <h3 class="title">{{obj.content_list[index].title}}</h3>
         <p class="author">{{'文 / '+obj.content_list[index].author.user_name}}</p>
         <img @click =changeq(item.content_id) :src="obj.content_list[index].img_url" alt="">
         <p class="article">{{obj.content_list[index].forward}}</p>
         <div class="s_bottom">
           <div class="bo_left">
             <span class="y_bot">今天</span>

           </div>
           <div class="bo_right">
             <span class="icon-shou1" @click= "did()" v-if="dd ==1"><label>1205</label></span>
             <span class="icon-shou2" @click= "didc()" v-if="dd ==0"><label>1206</label></span>
             <span class="icon-fen"></span>
           </div>

         </div>



     </div>

     <div class="music_y" v-for="(item ,index) in obj.content_list" v-if="item.content_type== 4">
       <p>- 音乐 -</p>
       <h3 class="title">{{obj.content_list[index].title}}</h3>
       <p class="author">{{'文 / '+obj.content_list[index].author.user_name}}</p>
       <div class="music_y_f">
         <img @click =changed_m(item.content_id) :src="obj.content_list[index].img_url" alt="">
       </div>

       <p class="article">{{obj.content_list[index].forward}}</p>

       <div class="s_bottom">
         <div class="bo_left">
           <span class="y_bot">今天</span>

         </div>
         <div class="bo_right">
           <span class="icon-shou1" @click= "die()" v-if="de ==1"><label>1205</label></span>
           <span class="icon-shou2" @click= "diec()" v-if="de ==0"><label>1206</label></span>
           <span class="icon-fen"></span>
         </div>

       </div>
     </div>


     <div class="second" v-for="(item ,index) in obj.content_list" v-if="index>=1 && item.content_type==5">
         <p>- 问答 -</p>
         <h3 class="title">{{obj.content_list[index].title}}</h3>
         <p class="author">{{'文 / '+obj.content_list[index].author.user_name}}</p>
         <img @click =changef(item.content_id) :src="obj.content_list[index].img_url" alt="">
         <p class="article">{{obj.content_list[index].forward}}</p>
         <div class="s_bottom">
           <div class="bo_left">
             <span class="y_bot">今天</span>

           </div>
           <div class="bo_right">
             <span class="icon-shou1" @click= "dif()" v-if="df ==1"><label>1205</label></span>
             <span class="icon-shou2" @click= "difc()" v-if="df ==0"><label>1206</label></span>
             <span class="icon-fen"></span>
           </div>

         </div>



     </div>

     <div class="second" v-for="(item ,index) in obj.content_list" v-if="index>=1 && item.content_type==6">
         <p>- ONE STORY -</p>
         <h3 class="title">{{obj.content_list[index].title}}</h3>
         <p class="author">{{'文 / '+obj.content_list[index].author.user_name}}</p>
         <img @click =change(item.content_id) :src="obj.content_list[index].img_url" alt="">
         <p class="article">{{obj.content_list[index].forward}}</p>
         <div class="s_bottom">
           <div class="bo_left">
             <span class="y_bot">今天</span>

           </div>
           <div class="bo_right">
             <span class="icon-shou1" @click= "dig()" v-if="dg ==1"><label>1205</label></span>
             <span class="icon-shou2" @click= "digc()" v-if="dg ==0"><label>1206</label></span>
             <span class="icon-fen"></span>
           </div>

         </div>



     </div>



    </div>


</template>

<script>

export default {
  props: ['obj'],
  data() {
    return {
      show: false,
      isClick: false,
      shown: false,
      ta:1,
      tb:1,
      db:1,
      dc:1,
      dd:1,
      de:1,
      df:1,
      dg:1

    }

  },
  methods: {

    // 默认隐藏
    shows() {
      if (this.isClick) {
        this.show = false
        this.isClick = false
      } else {
        this.show = true
        this.isClick = true
      }
    },
    shows_m() {
      if (this.isClick) {
        this.shown == false;
        this.isClick = false;
      } else {
        this.shown = true
        this.isClick = true
      }
    },
    shows_s() {
      this.shown = false


    },
    change(item) {
      console.log(this.show);
      this.show = false
      this.$router.push({
        path: '/allDetials/essay/' + item
      })
    },
    changed(msg) {
      console.log(this.show);
      this.show = false
      this.$router.push({
        path: '/allDetials/hp/' + msg
      })
    },
    changes(item) {


      this.$router.push({
        path: '/allDetials/Serial/' + item
      })
    },
    changeq(item) {
      console.log(this.show);
      this.show = false
      this.$router.push({
        path: '/allDetials/question/' + item
      })
    },
    changef(item) {
      console.log(this.show);
      this.show = false
      this.$router.push({
        path: '/allDetials/question/' + item
      })
    },

    changed_m(mess) {
      console.log(this.show);
      this.show = false;
      this.$router.push({
        path: '/allDetials/music/' + mess
      })
      location.reload();
    },
    tiao(ms){
      console.log(ms);
      this.$router.push({
          path:'/allDetials/hp/'+ms
      })
    },
 typ(){
   this.ta = 0;
 },
 typc(){
   this.ta = 1;
 },
 typa(){
   this.tb = 0;
 },
 typac(){
   this.tb = 1;
 }
,
dib(){
  this.db=0
},
dibc(){
  this.db =1
},
dic(){
  this.dc=0
},
dicc(){
  this.dc =1
},
did(){
  this.dd=0
},
didc(){
  this.dd =1
},
die(){
  this.de=0
},
diec(){
  this.de =1
},
dif(){
  this.df=0
},
difc(){
  this.df =1
},
dig(){
  this.dg=0
},
digc(){
  this.dg =1
},
    hides() {
      this.show = false
    }


  }

}
</script>

<style lang="css" scoped>
*{
  margin:0;
  padding:0;
}
.body{
  color:#939393 !important;
  position: relative;
  /*height: 100%;*/
}
span{
  color: #939393;
}
.all{
  width:100%;
  background:#fff;


}

.first{
  width:100%;
  margin-top: 0.1rem;
}
.first>img{
  width:100%;
}
img{
width:100%;
height:12%;
}
.author,.authors{

display:block;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  padding: 0.2rem  1rem 0.2rem 1.4rem;
}
.authors{

  padding: 1rem  1rem 1rem 1.4rem;
}
.underline_y{
  width:90%;
  margin:0 auto;
  text-align: left;
  padding: 0.8 rem  1rem 0.2rem 1.4rem;
  /*height: 2rem;*/
  line-height: 2rem;


}


.music_y_f{
  width: 50%;
  margin:0 auto;
  border-radius: 50%;
  overflow: hidden;
}
.music_y_f>img{
  width:100%;
}
.bottom{
  height: 2.4rem;
  margin: 0.3rem 0;
}
.icon-shou1:before{
  display: inline-block;
  content:"\e90b";
    font-size:1.6rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.icon-shou2:before{
  display: inline-block;
  content:"\e90c";
    font-size:1.6rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.icon-shou1 label{
  display: inline-block;
  font-size: 0.01rem;
}
.icon-shu:before{
  display: inline-block;
  content:"\e90d";
    font-size:1.4rem;
    margin-left: 1rem;
    vertical-align: middle;
}
.cop{
  display: inline-block;
  content:"\e90d";
    font-size:1.4rem;
    margin-left: 1rem;
    font-weight: bold;
    vertical-align: middle;
}
.icon-fen:before{
  display: inline-block;
  content:"\e908";
    font-size:2.2rem;
    margin-left: 1.4rem;
    margin-right: 0.6rem;
    vertical-align: middle;

}
.icon-bi:before{
  content:"\e907";
    font-size:2rem;
    vertical-align: middle;
    margin-right: 0.4rem;
}
.bo_left,.bo_right{
  display: inline-block;
}
.bo_left{
  width:40%;
  text-align: left;
  padding-left: 1.4rem;
  float: left;
}
.bo_right{
  width:50%;
  float: right;
  text-align: right;
}
.xiala{
  /*height: 5rem;*/
  border-top: 0.4rem solid rgba(239,239,239,.9);
  border-bottom: 0.4rem solid rgba(239,239,239,.9);
}
.y_xiala{
  line-height: 4rem;
  font-size: 1.2rem
}
.showxiala{
  text-align: left;
}
.showxiala .xiaLaList{
  width:100%;
  height: 4.4rem;
  border-bottom: 1px solid rgba(239,239,239,.9);

}
.xiaLaList>img{
  padding:1.4rem 0 0.2rem 0.6rem;
  vertical-align: middle;
  width:3%;
  height: 15%;
  float: left;
}
.xiaLaList .y_xialeft{
  display: inline-block;
  width:80%;
  float: left;
  height: 2.6rem;
  margin-left: 0.8rem;
  padding-top: 0.8rem;
  text-align: left;


}
.second{
  border-bottom: 1.4rem solid rgba(244, 244, 244, 0.5);
}
.second>p,.music_y>p{
   text-align: center;
   padding:1.2rem 0;
}
.title{
  text-align: left;
  padding: 0.3rem 0 0rem 1.4rem ;
}
.second .author,.music_y .author{
  text-align: left;
  padding: 0 0 0.4rem 1.4rem ;
}
.second img{
  width:90%;
  padding-left: 1.5%;
  height: 12%;
}
.second .article,.music_y .article{
  text-align: left;
  padding:1.4rem 4rem 1rem 1.4rem;
  /*height: 2rem;*/
  font-size: 1rem;
  line-height: 2rem;
  color:#939393;

}
.second .s_bottom,.music_y .s_bottom {
  height: 3rem;
  margin-top: 1rem;
}



</style>
